{% extends "layout.html" %}

{% block head %}
<title>{{ _(config["WEBSITE_NAME"]) }} - {{ _("Perview") }}</title>
<meta name="robots" content="noindex, nofollow">
{% endblock %} 

{% block body %}
<style type="text/css">
	@media only screen and (max-width: 768px) {
		.fixed {
    		position: static;
  		}
  		.sticky {
			{% if session["direction"] == "rtl" %}
				float: right !important;
  				padding-right: 0px;
				padding-left: 0px;
  			{% else %}
  				float: left !important;
  			{% endif %}
  		}
  		#page-content {
  			width: 100% !important;
			{% if session["direction"] == "rtl" %}
    			float: right !important;
    			padding-right: 10px;
				padding-left: 0px;
    		{% else %}
    			float: left !important;
    			margin-right: -14px;
    		{% endif %}
  		}
	}
</style>
<div class="row">
	<div class="container-fluid">
		<div class="row">
			{% if session["direction"] == "rtl" %}
				<div class="col-sm-6 pull-right" style="padding: 0px !important">
			{% else %}
				<div class="col-sm-6 pull-left" style="padding: 0px !important">
			{% endif %}
				<h1 style="margin: 0 !important; padding: 10px !important;">{{ address }}</h1>
			</div>
			{% if session["direction"] == "rtl" %}
				<div class="col-sm-6 pull-left" style="padding: 0px !important">
			{% else %}
				<div class="col-sm-6 pull-right" style="padding: 0px !important">
			{% endif %}
				{% include "wiki/search_bar.html" %}
			</div>
		</div>
		<div class="col-sm-12" style="padding: 0px !important">
			<hr style="border-top: 1px solid #a2a9b0; margin-top: -5px; margin-bottom: 15px;">
		</div>
		{% if session["direction"] == "rtl" %}
			<aside class="sticky pull-right col-sm-2">
		{% else %}
			<aside class="sticky pull-left col-sm-2">
		{% endif %}
			<ul style="margin:12px 0px; padding: 0px;">
				<b style="font-size: 19px;">{{ _("Contents:") }}</b>
				<hr style="background-color: #DDDDDD; width: 100%; height: 1px; margin: 4px;">
				{% for header in headerList %}
					{% if header.name == "h1" %}
						<li>•<a href="#{{ header['id'] }}"> {{ header.text }}</a></li>
					{% else %}
						{% if session["direction"] == "rtl" %}
							<li style="padding-right: {{ int(header.name[1]) * 5 }}px;">•<a href="#{{ header['id'] }}"> {{ header.text }}</a></li>
						{% else %}
							<li style="padding-left: {{ int(header.name[1]) * 5 }}px;">•<a href="#{{ header['id'] }}"> {{ header.text }}</a></li>
						{% endif %}
					{% endif %}
				{% endfor %}
			</ul>
		</aside>
		<section style="margin-top: 20px !important;" id="page-content" class="pull-left col-sm-10">
			{{ content|safe }}
		</section>
	</div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
	var offset = $(".sticky").offset();
	$(window).scroll(function(e) {
	  	if(window.scrollY >= offset.top) { 
	  		$(".sticky").addClass("fixed");
			{% if session["direction"] == "rtl" %}
	  			document.getElementById("page-content").setAttribute("class", "pull-left col-sm-10")
	  		{% else %}
	  			document.getElementById("page-content").setAttribute("class", "pull-right col-sm-10")
	  		{% endif %}	
	  	} else {
	      	$(".sticky").removeClass("fixed");
			{% if session["direction"] == "rtl" %}
	  			document.getElementById("page-content").setAttribute("class", "pull-right col-sm-10")
	  		{% else %}
	  			document.getElementById("page-content").setAttribute("class", "pull-left col-sm-10")
	  		{% endif %}
	  	}
	});
	hljs.initHighlightingOnLoad();
</script>
{% endblock %}